// 获取token值
const token = localStorage.getItem('ydd-token')



// 获取数据渲染页面
axios.get('/index/baseInfo', {}).then((res) => {
  // console.log(res);
  let userlist = ''
  res.data.data.new_user.forEach((item, index) => {
    if (index > 7) return
    const { username, sex, address } = item
    userlist += `<div class="userlist">
       <div class="info">
         ${username}
       </div>
       <div class="from">
         ${sex === 1 ? '男' : '女'}
       </div>
       <div class = 'address'>
           ${!address ? '无' : address}
         </div>
     </div>`
  })
  document.querySelector('.el-row1').innerHTML = userlist
  const adminNum = res.data.data.admin_num;
  const advimgNum = res.data.data.advimg_num;
  const advposNum = res.data.data.advpos_num;
  const articleNum = res.data.data.article_num
  const userMan = res.data.data.user.user_man;
  const userWoman = res.data.data.user.user_woman;
  const userTotal = res.data.data.user.total;
  const allcateName = res.data.data.all_cate.map((item) => {
    return item.catename
  }).join(',').split(',');
  const allcateNum = res.data.data.all_cate.map((item) => {
    return item.num
  }).join(',').split(',');
  const hotarticleTittle = res.data.data.hot_article.map((item) => {
    return item.title
  }).join(',').split(',');
  // console.log(hotarticleTittle);
  // const newuserName = res.data.data.new_user.map((item) => {
  //   return item.username
  // }).join(',').split(',');
  // const newuserSex = res.data.data.new_user.map((item) => {
  //   return item.sex
  // }).join(',').split(',');
  // // console.log(newuserSex);
  // const newuserAddress = res.data.data.new_user.map((item)=>{
  //   if(item.address === null){
  //     return '无'
  //   }
  //   return item.address
  // }).join(',').split(',')
  // console.log(newuserAddress);
  // // console.log(allCate);
  // document.querySelector('.dc1 b').innerHTML = adminNum
  // document.querySelector('.scolor01 b').innerHTML = userTotal
  // document.querySelector('.scolor02 b').innerHTML = articleNum
  // document.querySelectorAll('.scolor03 b')[0].innerHTML = advposNum
  // document.querySelectorAll('.scolor03 b')[1].innerHTML = advimgNum

  // const newsersexArr = newuserSex.map((item)=>{
  //   return item
  // }).join('')
  // console.log(newsersexArr);
  // const newuseraddressArr = newuserAddress.map((item)=>{
  //   return item
  // }).join('')
  // console.log(newuseraddressArr);
  // document.querySelector('.el-row1').innerHTML += newuserName.map((item) =>{
  //   return `<div class="userlist">
  //   <div class="info">
  //     ${item}
  //   </div>
  //   <div class="from">
  //     ${newsersexArr === 1 ? '男' : '女'}
  //   </div>
  //   <div class = 'address'>
  //       ${newuseraddressArr}
  //     </div>
  // </div>`
  // }).join('')
  document.querySelector('.el-row2').innerHTML += hotarticleTittle.map((item) => {
    return `<div class="userlist">
    <div class="info">
      ${item}
    </div>
  </div>`
  }).join('')
  // echarts图区域
  const chartDom1 = document.querySelector('#pie_show')
  const myChart1 = echarts.init(chartDom1)
  const chartDom2 = document.querySelector('#colum')
  const myChart2 = echarts.init(chartDom2)
  // 饼图
  const option1 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center',
      data: ['男', '女']
    },
    series: [
      {
        name: '男女比例',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        itemStyle: {
          // color: 'green',
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
          normal: {
            color: function (colors) {
              let colorList = [
                '#75bedc',
                '#ef6567'
              ];
              return colorList[colors.dataIndex];
            }
          },
        },

        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: userMan, name: '男' },
          { value: userWoman, name: '女' },
        ]
      },

    ],
    smooth: true,
  };

  // 柱状图
  let dataAxis = allcateName;
  // prettier-ignore
  let data = allcateNum;
  let yMax = 500;
  let dataShadow = [];
  for (let i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
  }
  const option2 = {
    title: {
      text: '各分类文章发布数量',
    },
    xAxis: {
      data: dataAxis,
      axisLabel: {
        inside: true,
        color: '#fff',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999',
      }
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    
    series: [
      {
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        },
          // normal: {
          //   //这里是重点
          //   color: function(params) {
          //     //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
          //     var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
          //     //给大于颜色数量的柱体添加循环颜色的判断
          //     let lindex = params.dataIndex;
          //     if (params.dataIndex >= colorList.length) {
          //      lindex = params.dataIndex - colorList.length;
          //     }
          //     return colorList[lindex]
          //   }
          // }
        
        data: data
      },
      // 背部阴影
      // {
      //   type: 'bar',
      //   itemStyle: {
      //     normal:{color: 'rgba(0,0,0,0.05)'}
      //   },
      //   barGap: '-100%',
      //   barCategoryGap: '50%',
      //   data:[120,120,120,120,120,120,120]
      // }
    ]
  };
  // Enable data zoom when user click bar.
  const zoomSize = 6;
  myChart2.on('click', function (params) {
    // console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    myChart2.dispatchAction({
      type: 'dataZoom',
      startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
      endValue:
        dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
  });




  // const option2 = {
  //   title: {
  //     text: '各分类文章发布数量',
  //     left: 'center'
  //   },
  //   xAxis: {
  //     type: 'category',
  //     data: allcateName
  //   },
  //   yAxis: {
  //     type: 'value'
  //   },
  //   series: [
  //     {
  //       data: allcateNum,
  //       type: 'bar',
  //       showBackground: true,
  //       itemStyle: {
  //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //           { offset: 0, color: '#83bff6' },
  //           { offset: 0.5, color: '#188df0' },
  //           { offset: 1, color: '#188df0' }
  //         ])
  //       },
  //     }
  //   ]
  // };

  option1 && myChart1.setOption(option1);
  option2 && myChart2.setOption(option2)

})




